<template>
	<view>
		<view v-for="(sensor,sensorIndex) in sensorList" :key="sensorIndex">
			<view class="text-grey text-lg">
				<view class="action margin-bottom-sm flex justify-between" @click="tapSensor(sensor)">
					<view>
						<text class="cuIcon-titles text-green"></text>
						<text
							class="text-bold margin-right-sm">{{formatSensorType(sensor.type)}}{{$t('port')}}:{{sensor.port}}</text>
						<text v-if="sensor.sensorName">| {{sensor.sensorName}}</text>
					</view>
					<text class="cuIcon-right text-black text-xl margin-top-xs" style="float: right;"></text>
				</view>
				<view
					style="display: grid;grid-template-columns:1fr 1fr;grid-template-rows 1fr 1fr;grid-auto-flow : row dense;grid-column-gap: 5px;">
					<view v-for="(item,index) in sensor.paramList" :key="index"
						:style="(item.isFullLine ? 'grid-column-start: span 2':'grid-column-start: span 1')">
						<view :style="{'background': item.background}"
							class="bg-white padding-sm margin-bottom-sm common-box">
							<view class="flex justify-start margin-bottom">
								<view class="cu-avatar radius sm" :style="[{backgroundImage:`url(${item.iconUrl})`}]"
									style="width: 55rpx;height: 55rpx;background-color:rgba(0,0,0,0);;margin: 5rpx 8rpx 0 0;">
								</view>
								<view>
									<view class="text-sm text-bold text-grey text-left">
										<text v-if="item.remark && item.remark!==''">
											{{item.remark}}
										</text>
										<text v-else>
											{{item.name}}
										</text>
									</view>
									<view class="text-gray text-xs" >
										{{formatDateTime(item.updateDate)}}
									</view>
								</view>
							</view>
							<view :style="[{color:themeConfig.primaryColor}]"
							class="margin-bottom"
								style="display: flex;justify-content: center;flex-wrap: wrap;min-height: 20px;">
								<!-- <view v-for="(split,index2) in item.value.split(',')" :key="index2"
									class="margin-bottom-xs">
									<text style="margin-left: 20px;" v-if="index2 > 0"></text>
									<text>{{split}}</text>
									<text class="text-grey margin-left-xs">
										{{item.unit}}
									</text>
								</view> -->
								<view class="text-xxl">
									<text class="margin-right-xs">{{item.value}}</text>
									<text class="text-grey">
										{{item.unit}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import {formatDateTime} from '@/util/formatTime.js'
	import *
	as deviceSensorApi from '@/api/iot/iotDeviceSensorApi.js'
	import {
		formatSensorType
	} from '@/util/dataUtil.js'
	import * as storage from '@/util/storage.js'
	export default {
		name: 'DeviceParam',
		data() {
			return {
				sensorList: [],
				showHidden: storage.getShowHidden()
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			deviceName: {
				type: String,
				default: ''
			},
			deviceCore: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.init()
			storage.setDeviceNavigationComponent('deviceParam')
		},
		methods: {
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			formatSensorType(type) {
				return formatSensorType(this, type)
			},
			tapSensor(e) {
				const {
					sensorId,
					sensorName,
					port
				} = e
				uni.navigateTo({
					url: `/pages/deviceSensorData/deviceSensorData?sensorId=${sensorId}&sensorName=${sensorName}&deviceCore=${this.deviceCore}&deviceName=${this.deviceName}&port=${port}`
				})
			},
			init(option) {
				this.getListWith()
			},
			getListWith(e) {
				const screenHeight = storage.getScreenHeight()
				deviceSensorApi.getListWith({
					deviceCore: this.deviceCore,
					withExplain: false,
					withParam: true,
					withSetting: false,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						const sensorList = []
						data.forEach(sensor => {
							if (!this.showHidden && sensor.hidden) {
								return
							}
							if (!sensor.paramList) {
								return
							}
							const paramList = []
							sensor.paramList.forEach(param => {
								if (!this.showHidden && param.hidden) {
									return
								} else if (param.value.length > 9 || param.name.length > 8 ||
									param.remark.length > 8) {
									param.isFullLine = true
								} else {
									param.isFullLine = false
								}
								paramList.push(param)
							})
							sensor.paramList = paramList
							if (sensor.paramList.length > 0) {
								sensorList.push(sensor)
							}

						})

						this.sensorList = sensorList
					} else {
						showToast(this.$t('not') + this.$t('data'), 'none', 1000, false)
					}
				})
			}
		}
	}
</script>
